<template>
  <div class="feedback-container">
    <!-- 顶部标题栏 -->
    <div class="top-header">
      <div class="title-container">
        <button class="back-btn" @click="goBack">返回</button>
        <h1>问题反馈</h1>
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 问题类型选择 -->
      <div class="type-section">
        <div class="section-title">请选择问题类型</div>
        <div class="type-options">
          <div
              v-for="(type, index) in problemTypes"
              :key="index"
              :class="['type-item', { active: selectedType === type }]"
              @click="selectedType = type"
          >
            {{ type }}
          </div>
        </div>
      </div>

      <!-- 反馈内容输入 -->
      <div class="feedback-input">
        <div class="section-title">反馈内容</div>
        <textarea
            v-model="feedbackContent"
            placeholder="请详细描述您遇到的问题..."
            rows="5"
        ></textarea>
      </div>

      <!-- 手机号输入 -->
      <div class="phone-input">
        <div class="section-title">手机号</div>
        <input
            type="tel"
            v-model="phoneNumber"
            placeholder="请输入您的手机号"
        >
      </div>

      <!-- 提交按钮 -->
      <div class="submit-btn" @click="submitFeedback">
        提交反馈
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 问题类型列表
const problemTypes = ['使用问题', '购买问题', '优化建议', '其他']
const selectedType = ref('')
const feedbackContent = ref('')
const phoneNumber = ref('')

// 返回上一页
const goBack = () => {
  history.back()
}

// 提交反馈
const submitFeedback = () => {
  if (!selectedType.value) {
    alert('请选择问题类型')
    return
  }
  if (!feedbackContent.value.trim()) {
    alert('请输入反馈内容')
    return
  }
  if (!phoneNumber.value) {
    alert('请输入手机号')
    return
  }

  // TODO: 实现提交逻辑
  console.log({
    type: selectedType.value,
    content: feedbackContent.value,
    phone: phoneNumber.value
  })
}
</script>

<style scoped>
.feedback-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.top-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #000;
  padding: 10px 15px;
  z-index: 100;
}

.title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-container h1 {
  color: #fff;
  font-size: 18px;
  margin: auto;
  margin-right: 130px;
}

.back-btn {
  padding: 4px 5px;
  background: transparent;
  color: white;
  border: 1px solid white;
  border-radius: 4px;
  font-size: 12px;
}

.main-content {
  padding: 54px 15px 20px;
}

.section-title {
  font-size: 15px;
  color: #333;
  margin-bottom: 10px;
}

.type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.type-item {
  padding: 8px 15px;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
  border: 1px solid #ddd;
}

.type-item.active {
  background: #e1f5fe;
  color: #0288d1;
  border-color: #0288d1;
}

.feedback-input, .phone-input {
  margin-top: 20px;
}

textarea, input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
}

textarea:focus, input:focus {
  border-color: #0288d1;
  outline: none;
}

.submit-btn {
  margin-top: 30px;
  background: #0a0a0a;
  color: #fff;
  text-align: center;
  padding: 12px;
  border-radius: 4px;
  font-size: 16px;
}

.submit-btn:active {
  opacity: 0.8;
}
</style>
